<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金山打字</title>
</head>

<body>
    <h1>0</h1>

</body>

</html>
<script>
    setInterval(function () {
        var fontObj = document.createElement('div')
        fontObj.className = 'font'
        fontObj.style.color = 'yellowgreen'
        fontObj.style.fontSize = '30px'
        fontObj.style.lineHeight='32px'
        var min = 0
        var max = 25
        var index = Math.floor(Math.random() * (max - min + 1) + min)
        fontObj.innerText = 'abcdefghijklmnopqrstuvwxyz'.split('')[index].toUpperCase()
        // fontObj.innerText.toUpperCase
        var leftMin = 0
        var leftMax = (document.documentElement.clientWidth || window.innerWidth)  - parseInt(fontObj.style.fontSize)
        var left = Math.floor(Math.random() * (leftMax - leftMin + 1) + leftMin)
        var topMin = 0
        var topMax = (document.documentElement.clientHeight || window.innerHeight) - parseInt(fontObj.style.lineHeight)
        var top = Math.floor(Math.random() * (topMax - topMin + 1) + topMin)
        fontObj.style.position = 'absolute'
        fontObj.style.left = left + 'px'
        fontObj.style.top = top + 'px'
        document.body.appendChild(fontObj)

    }, 1000)

    document.onkeyup = function (e) {
        var e = e || window.event
        // console.log(e.key);
        var fonts = document.querySelectorAll('.font')
        console.log(fonts);
        fonts.forEach(function (item) {
            if (item.innerText === e.key.toUpperCase()) {
                document.body.removeChild(item)
                var i = parseInt(document.querySelector('h1').innerText)
                document.querySelector('h1').innerText = i + 1
            }
        })
    }
</script>